<template>
  <div>
    <!-- 模糊 -->
    <el-row>
      时间选择：
      <el-button type="primary" size="mini" plain @click="allDay()"
        >全部</el-button
      >
      <el-button type="primary" size="mini" plain @click="zjDay(1)"
        >今天</el-button
      >
      <el-button type="primary" size="mini" plain @click="zjDay(2)"
        >昨天</el-button
      >
      <el-button type="primary" size="mini" plain @click="zjDay(3)"
        >最近7天</el-button
      >
      <el-button type="primary" size="mini" plain @click="zjDay(4)"
        >最近30天</el-button
      >
      <el-button type="primary" size="mini" plain @click="zjDay(5)"
        >本月</el-button
      >
      <el-button type="primary" size="mini" plain @click="zjDay(6)"
        >本年</el-button
      >
      <el-date-picker
        v-model="searchEntity.dateTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </el-row>

    拼团状态:
    <template>
      <el-select v-model="searchEntity.status" placeholder="请选择">
        <el-option label="请选择" value=""></el-option>
        <el-option label="进行中" :value="0"></el-option>
        <el-option label="已完成" :value="1"> </el-option>
        <el-option label="未完成" :value="2"> </el-option>
      </el-select>
    </template>

    <el-button type="primary" round @click="getGroupRecordList()">查询</el-button>

    <!-- 表格 -->
    <template>
      <el-table :data="groupRecordList" border style="width: 100%">
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="image" label="砍价图片">
          <template slot-scope="scope">
            <img
              :src="scope.row.image"
              alt="未加载到图片"
              width="100px"
              height="100px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="砍价商品名称"> </el-table-column>
        <el-table-column prop="goodsScore" label="商品介绍"> </el-table-column>
        <el-table-column prop="price" label="砍价价格"> </el-table-column>
        <el-table-column prop="personNum" label="总共砍价次数"></el-table-column>
        <el-table-column prop="joinNum" label="剩余砍价次数"></el-table-column>
        <el-table-column prop="successNum" label="成团数量"></el-table-column>
        <el-table-column prop="sumLimit" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            {{statusList[scope.row.status]}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==1" @click="getRecord(scope.row.id)" type="text" size="small"
              >查看详情</el-button
            >
            <el-button v-if="scope.row.status==2" @click="del(scope.row.id)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="reloadList(num)"
        @current-change="reloadList(num)"
        :current-page.sync="searchEntity.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="searchEntity.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>


<el-dialog title="查看详情" :visible.sync="dialogTableVisible">
  <el-table :data="groupRecordHelp">
    <el-table-column property="userId" label="用户id" width="150"></el-table-column>
    <el-table-column property="user.imgUrl" label="用户头像" width="200">
      <template slot-scope="scope">
        <img
              :src="scope.row.user.imgUrl"
              alt="未加载到图片"
              width="100px"
              height="100px"
            />
      </template>
    </el-table-column>
    <el-table-column property="user.userName" label="用户名称"></el-table-column>
    <el-table-column property="orderId" label="订单编号"></el-table-column>
    <el-table-column property="orderMoney" label="拼团金额"></el-table-column>
    <el-table-column property="orderStatus" label="状态">
      <template slot-scope="scope">
        {{scope.row.orderStatus=='0'?'申请中':'已支付'}}
      </template>
    </el-table-column>
  </el-table>
</el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      groupRecordHelp:[],//拼团人信息
      groupRecordList: [],
      total: 0,
      groupGoods: {},
      searchEntity: {
        limit: 10,
        page: 1,
      },
      statusList:["进行中","已完成","已结束"],
      dialogTableVisible:false,
formLabelWidth: '120px',
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getRecord(id) {
      //列表
      //获取拼团商品列表
      this.$http
        .get(
          "http://localhost:8001/coco/group/help/findBuyHelp/"+id,
          {
            headers: {
              token: this.token,
              type: "1",
            },
          }
        )
        .then(({ data }) => {
          if (data.code != 0) {
            this.$message({
              message: data.message,
              type: "error",
            });
            this.$router.push("/");
          }
          this.groupRecordHelp = data.data;
          for(var i  in data.data){
            console.log(data.data[i].user)
          }
          this.dialogTableVisible=true;
        })
        .catch((err) => {});
    },
    del(id) {
      this.$http
        .delete("http://localhost:8001/coco/group/record/deleteById/" + id, {
          headers: {
            token: this.token,
            type: "1",
          },
        })
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: "删除拼团信息成功!",
              type: "success",
            });
          } else {
            this.$message.error("删除拼团信息失败!");
          }
          this.getGroupRecordList();
        })
        .catch((err) => {});
    },
    reloadList(num) {
      //分页
      if (num == 1) {
        this.saleList();
      }
      if (num == 2) {
        this.warehouseList();
      }
      if (num == 3) {
        this.findSelloutGoods();
      }
      if (num == 4) {
        this.findRecycleGoods();
      }
    },
    getGroupRecordList() {
      //列表
      //获取拼团商品列表
      this.$http
        .post(
          "http://localhost:8001/coco/group/record/search",
          this.searchEntity,
          {
            headers: {
              token: this.token,
              type: "1",
            },
          }
        )
        .then(({ data }) => {
          console.log(data);
          if (data.code != 0) {
            this.$message({
              message: data.message,
              type: "error",
            });
            this.$router.push("/");
          }
          this.groupRecordList = data.data.rows;
          this.total = data.data.total;
        })
        .catch((err) => {});
    },
    //获取全部
    allDay() {
      this.searchEntity.dateTime = null;
      this.searchEntity.day = 0;
      this.getGroupList();
    },
    //按时间查询
    zjDay(num) {
      this.searchEntity.day = num;
      this.searchEntity.dateTime = null;
      this.getGroupList();
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.token = localStorage.getItem("token");
    this.getGroupRecordList();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>